<template>
	<view class="content">
		<view class="topBag">
			<view class="" style="width: 100%;height: 36rpx;"></view>
			<image class="avatar" :src="userInfo.headPortrait" mode=""></image>
			<view class="userName">
				<p class="name">{{userInfo.nickName}}</p>
				<p class="uid">UID:{{userInfo.unid}}</p>
				<p class="uid">
					分销等级:{{userInfo.levelDto !== undefined && userInfo.levelDto !== null ? userInfo.levelDto.gradeName : '暂无'}}
				</p>
			</view>
			<image class="setting" @click="goSetting" src="../../static/myImages/setting.png" mode=""></image>
			<view class="topMoney">
				<p class="money" @click="goMyBalance">{{userInfo.balance || 0}}</p>
				<p class="money" @click="goProfit">{{userInfo.gradeCommission || 0}}</p>
				<p class="money" @click="goMyTeam">{{userInfo.promotionNumber || 0}}</p>
				<p class="moneyTitle">账户余额</p>
				<p class="moneyTitle">累计收益</p>
				<p class="moneyTitle">推广人</p>
			</view>
			<view class="withdrawalCard">
				<view class="withdrawalLeft">
					<p class="withdrawalTitle">可提现</p>
					<p class="withdrawalMoney"><span style="font-size: 30rpx;">￥</span>{{userInfo.commissionBalance}}
					</p>
				</view>
				<!-- v-if="isOpenWithdrawal !== null && isOpenWithdrawal !== undefined && isOpenWithdrawal !== 1" -->
				<view class="withdrawalRightButton" @click="goWithdrawal">
					立即提现
				</view>
			</view>
		</view>
		<view class="myOrder" @click="goMyOrder">
			<p class="myTitle">我的订单</p>
			<p class="allTitle">全部订单<uni-icons type="right" color="#999" size="16"></uni-icons></p>
			<view class="orderStatus">
				<image src="../../static/myImages/order01.png" mode=""></image>
				<p>待付款</p>
			</view>
			<view class="orderStatus">
				<image src="../../static/myImages/order02.png" mode=""></image>
				<p>待发货</p>
			</view>
			<view class="orderStatus">
				<image src="../../static/myImages/order03.png" mode=""></image>
				<p>待收货</p>
			</view>
			<view class="orderStatus">
				<image src="../../static/myImages/order04.png" mode=""></image>
				<p>待评价</p>
			</view>
		</view>
		<view class="entranceBox">
			<view v-for="(item,index) in entranceList" class="entrance" @click="goUrl(item)">
				<image :src="item.img" alt="" />
				<p>{{item.name}}</p>
				<uni-icons class="uniIcons" type="right" color="#000" size="16"></uni-icons>
			</view>
		</view>
		<uni-popup ref="popup02" type="center">
			<view class="noBuyCommodity">
				<p class="title">温馨提示</p>
				<p class="tishi">购买报单商品享受推广资格</p>
				<view class="" style="display: flex;justify-content: center;">
					<view class="button01" @click="close02()">
						取消
					</view>
					<view class="button02" @click="goClass()">
						前往购买
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		checkLoginStatus
	} from '@/utils/auth';
	import {
		getUserInfo,
		getConfig

	} from '@/api/user.js';
	export default {
		data() {
			return {
				userInfo: {},
				isOpenWithdrawal: null,
				entranceList: [{
						id: 0,
						name: '收益明细',
						url: 'profit/index',
						img: '../../static/myImages/button01.png'
					},
					{
						id: 1,
						name: '我的余额',
						url: 'myBalance/index',
						img: '../../static/myImages/button02.png'
					},
					{
						id: 2,
						name: '我的团队',
						url: 'myTeam/index',
						img: '../../static/myImages/button03.png'
					},
					{
						id: 3,
						name: '邀请分享',
						url: 'invitation/index',
						img: '../../static/myImages/button04.png'
					},
					{
						id: 4,
						name: '余额转增',
						url: 'balanceGive/index',
						img: '../../static/myImages/button05.png'
					},
					{
						id: 5,
						name: '浏览记录',
						url: 'browse/index',
						img: '../../static/myImages/button06.png'
					},
					{
						id: 6,
						name: '我的收藏',
						url: 'collection/index',
						img: '../../static/myImages/button07.png'
					},
					{
						id: 7,
						name: '收货地址',
						url: 'address/index',
						img: '../../static/myImages/button08.png'
					}
				],
			}
		},
		onShow() {
			this.getUser()
			const data = {}
			getConfig(data).then(res => {
				this.isOpenWithdrawal = res.data.records[0].isOpenWithdrawal
			})
		},
		onLoad() {
			if (!checkLoginStatus()) {
				// 用户未登录，已重定向到登录页面
				console.log("未登录，跳转到登录");
				return;
			}
		},
		methods: {
			//获取用户信息
			getUser() {
				getUserInfo().then(res => {
					this.userInfo = res.data
				});
			},
			//功能列表跳转
			goUrl(item) {
				if (item.id == 3 && this.userInfo.isEnablePromotion == '1') {
					this.$refs.popup02.open()
				} else {
					uni.navigateTo({
						url: item.url
					})
				}
			},
			//去提现
			goWithdrawal() {
				uni.navigateTo({
					url: 'withdrawal/index'
				})
			},
			//去余额明细
			goMyBalance() {
				uni.navigateTo({
					url: 'myBalance/index'
				})
			},
			//去收益明细
			goProfit() {
				uni.navigateTo({
					url: 'profit/index'
				})
			},
			//去团队
			goMyTeam() {
				uni.navigateTo({
					url: 'myTeam/index'
				})
			},
			//去设置
			goSetting() {
				uni.navigateTo({
					url: 'setting/index'
				})
			},
			goMyOrder() {
				uni.navigateTo({
					url: 'myOrder/index'
				})
			},
			close02() {
				this.$refs.popup02.close()
			},
		}
	}
</script>

<style lang="scss">
	@import '@/uni.scss'; // 导入全局 SCSS 变量文件
	@import '/myIndex.scss'; // 导入全局 SCSS 变量文件

	.noBuyCommodity {
		width: 466rpx;
		height: 324rpx;
		background: linear-gradient(to bottom, #FFD1AB, #FFF0D6);
		border-radius: 20rpx;
		padding: 20rpx;

		.title {
			font-weight: bold;
			font-size: 30rpx;
			color: #333333;
			line-height: 34rpx;
			text-align: center;
			margin: 30rpx;
		}

		.tishi {
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
			line-height: 34rpx;
			text-align: center;
			background-color: none;
			margin-bottom: 80rpx;
		}

		.button01 {
			width: 177rpx;
			height: 62rpx;
			border-radius: 10rpx;
			border: 2rpx solid #FF9210;
			font-weight: 400;
			font-size: 26rpx;
			color: #FF9210;
			text-align: center;
			line-height: 62rpx;
			margin-right: 20rpx;
		}

		.button02 {
			width: 177rpx;
			height: 62rpx;
			background: #FF9210;
			border-radius: 10rpx;
			font-weight: 400;
			font-size: 26rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 62rpx;
		}
	}
</style>